<template>
<div class="container">
  <div class="nav">
 <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    :ellipsis="false"
    @select="handleSelect"
    :router="true"
    background-color="#409EFF"
     text-color="#fff"
    active-text-color="#fff"
  >
    <el-menu-item index="/">
      <img
        style="width: 100px"
        src="https://www.xaut.edu.cn/image/logo.png"
        alt="Element logo"
      />
    </el-menu-item>
    <div class="flex-grow" />
    <el-menu-item index="/index">首页</el-menu-item>
    <el-menu-item index="/judge" v-if="authority=='评委'"> 评委</el-menu-item>
   <el-menu-item index="/manage" v-if="authority=='管理员'"> 管理</el-menu-item>
    <el-menu-item index="/my"> 我的</el-menu-item>
    <div style="display: flex;align-items: center;margin: 10px ">
      <el-button type="success" :icon="Position" circle @click="layout" />
    </div>
  </el-menu>
  </div>
  <div class="body">
     <router-view></router-view>
  </div>
   <div class="footer">
     <p>Copyright © 2009-2023 All Rights Reserved. 挑战杯全国大学生课外学术科技作品竞赛、挑战杯中国大学生创业计划竞赛
        竞赛组委会 版权所有</p>
      <p> 京ICP备11009678号-2
      </p>
      <p>京公网安备 11010802028673号</p>
  </div>
</div>
</template>

<script setup>
import { ref } from 'vue'
import {useRouter} from "vue-router";
import {
 Position
} from '@element-plus/icons-vue'
const router = useRouter()
const authority = window.localStorage.getItem("authority")
const activeIndex = ref('1')
const handleSelect = (key, keyPath) => {
  console.log(key, keyPath)
}
const layout = ()=>{
  window.localStorage.clear()
  router.push('/login')
}
</script>

<style scoped lang="less">
.flex-grow {
  flex-grow: 1;
}
.container{
  display: flex;
  flex-direction: column;
margin:0!important;
  overflow-x: hidden;

  .body{
    flex:1;
    width: 100%;
      background-color: #f3f5f7;
    router-view{
      width: 100%;
      height: 100%;
    }
  }
}
 .footer {
      bottom: 0;
    height: 15%;
    color: #C0C4CC;
    font-size: 14px;
    padding: 10px;
   margin: 10px auto;
  }
</style>